<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-back" @click="goBack">←</view>
			<view class="nav-title">附近门店</view>
			<view class="nav-actions">···</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<input type="text" placeholder="输入需要搜索的内容" v-model="searchKeyword" @focus="showHistory = true" />
			<image src="/static/image/repair/搜索@2x.png" mode="" class="search-img"></image>
		</view>

		<!-- 历史记录 -->
		<view class="history-section" v-if="showHistory">
			<text class="history-label">历史记录：</text>
			<view class="history-tags">
				<text class="history-tag" v-for="(item, index) in historyList" :key="index">{{item}}</text>
			</view>
		</view>

		<!-- 门店列表 -->
		<view class="shop-list">
			<view class="shop-item" v-for="(shop, index) in shopList" :key="index" @click="goToShopDetail(shop.id)">
				<view class="shop-header">
					<view class="shop-name">{{shop.name}}</view>
					<view class="shop-distance">{{shop.distance}}</view>
				</view>

				<view class="shop-rating">
					<text class="stars">★★★★</text>
					<text class="score">{{shop.score}}分</text>
					<text class="sales">销量: {{shop.sales}}</text>
				</view>

				<view class="shop-content">
					<view class="shop-image">
						<image :src="shop.imageUrl" mode="aspectFill"></image>
					</view>

					<view class="shop-details">
						<text>营业时间：{{shop.businessHours}}</text>
						<text>位置：{{shop.address}}</text>
					</view>
				</view>
			</view>

			<!-- 无更多提示 -->
			<view class="no-more" v-if="shopList.length > 0">
				——暂无更多——
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	// 响应式数据
	const searchKeyword = ref('');
	const showHistory = ref(false);
	const historyList = ['飞飞汽车美容店', '飞飞汽修美容店', '汽车美容店', '汽修美容店'];
	const shopList = reactive([{
			id: 1,
			name: '车百事汽车生活馆',
			distance: '556m',
			score: 4,
			sales: 556,
			businessHours: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			imageUrl: '/static/image/repair/repair02.png'
		},
		{
			id: 2,
			name: '车百事汽车生活馆',
			distance: '556m',
			score: 4,
			sales: 556,
			businessHours: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			imageUrl: '/static/image/repair/repair02.png'
		}
	]);

	// 响应式数据
	const statusBarHeight = ref(0);

	// 方法定义
	function goBack() {
		uni.navigateBack();
	}

	function goToShopDetail(shopId) {
		uni.navigateTo({
			url: `../serviceDetail/serviceDetail?id=${shopId}`
		});
	}

	onMounted(() => {
		// 获取状态栏高度，使用推荐的wx.getWindowInfo API
		try {
			const windowInfo = uni.getWindowInfo();
			statusBarHeight.value = windowInfo.statusBarHeight;
		} catch (error) {
			console.error('获取窗口信息失败:', error);
			statusBarHeight.value = 0;
		}
	});
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.nav-bar {
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #1E88E5;
		color: white;
		padding: 0 16px;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-back {
		font-size: 20px;
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
	}

	.search-bar {

		height: 40px;
		background-color: #fff;
		border-radius: 20px;
		padding-left: 25px;
		padding-right: 25px;
		box-sizing: border-box;
		margin: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.search-bar input {

		height: 40px;
	}

	.search-img {
		width: 15px;
		height: 15px;
	}

	.history-section {
		/* background-color: white; */
		padding: 12px 16px;
		margin-bottom: 10px;
	}

	.history-label {
		color: #666;
		font-size: 14px;
	}

	.history-tags {
		margin-top: 8px;
		display: flex;
		flex-wrap: wrap;
	}

	.history-tag {
		background-color: #fff;
		padding: 5px 12px;
		border-radius: 15px;
		font-size: 13px;
		color: #666;
		margin-right: 10px;
		margin-bottom: 8px;
	}

	.shop-list {
		padding-bottom: 20px;

	}

	.shop-item {
		background-color: white;
		padding: 16px;
		/* margin-bottom: 10px; */
		margin: 10px;
		border-radius: 15px;
	}

	.shop-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.shop-name {
		font-size: 18px;
		font-weight: bold;
	}

	.shop-distance {
		color: #1E88E5;
	}

	.shop-rating {
		margin-bottom: 12px;
	}

	.stars {
		color: #FFC107;
		font-size: 14px;
	}

	.score {
		color: #333;
		font-size: 14px;
		margin-left: 5px;
	}

	.sales {
		color: #999;
		font-size: 14px;
		margin-left: 10px;
	}

	.shop-image {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 12px;
		margin-right: 30rpx;
	}

	.shop-image image {
		width: 120px;
		height: 80px;
		border-radius: 8px;
	}

	.shop-details text {
		display: block;
		color: #666;
		font-size: 14px;
		margin-bottom: 4px;
	}

	.no-more {
		text-align: center;
		color: #999;
		font-size: 14px;
		padding: 20px;
	}
</style>